<template>
    <div id="app" :class="'theme-' + theme" class="m-container">
        <div id="message-container" :style="styleList">
            <AppHeader></AppHeader>
            <div id="y-chat-page-container">
                <transition name="fade">
                    <keep-alive>
                        <router-view/>
                    </keep-alive>
                </transition>
            </div>
            <transition name="slide-up-y">
                <AppFooter v-show="showFooter"></AppFooter>
            </transition>
        </div>
        <Y-Mask></Y-Mask>
        <Modal></Modal>
    </div>
</template>

<script>
    import AppHeader                            from "./components/App-Header"
    import AppFooter                            from "./components/App-Footer"
    import Mask                                 from "./components/Mask"
    import Modal                                from "./components/Modal"
    import { checkReferrer }                    from './utily/referrer'
    import { getPageRefer, kstTypeUrl, loadJS } from './utily/util'
    import { mapActions, mapGetters }           from 'vuex'

    export default {
        components: {
            AppHeader,
            AppFooter,
            Modal,
            'Y-Mask': Mask,
        },
        data() {
            return {
                theme      : CONFIG.THEME.COLOR || 'blue',
                maxWidth   : CONFIG.BASE.MAX_WIDTH || 640,
                webChatInit: false,
            }
        },
        created() {
            CONFIG.KEYWORD       = checkReferrer();
            CONFIG.BASE.PAGE_TAG = `${ CONFIG.BASE.PAGE_TAG }_${ CONFIG.KEYWORD ? `关键字:${ CONFIG.KEYWORD }` : '没有关键字' }`;
        },
        mounted() {
            CONFIG.BASE.WEB_TITLE && (document.title = CONFIG.BASE.WEB_TITLE);
            // CONFIG.KST.JS && $('head').append($(CONFIG.KST.JS));

            this.generateChatOptions();

            CONFIG.BASE.DEBUG && this.debugGenerate();
        },
        methods   : {
            ...mapActions({
                sendImage    : 'Bridge/sendImage',
                sendText     : 'Bridge/sendText',
                filterMessage: 'Bridge/filterMessage',
                sendInputText: 'Bridge/sendInputText'
            }),
            debugGenerate() {
                let url = CONFIG.BASE.DEBUG_Script || 'https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js';
                $.getScript(url, () => {
                    // 初始化
                    var vConsole = new VConsole();
                    console.log('Hello world');
                })
            },
            generateChatOptions() {
                let item = CONFIG.TYPE_OPTIONS[ CONFIG.BASE.TYPE ];
                if (!item) {
                    console.warn('[Fail] CHAT Options not Found.');
                    return;
                }
                CONFIG.TYPE_OPTION = item;
                window.__chatType  = item.type;
                if (typeof this[ `${ item.type }Generate` ] === 'function') {
                    this[ `${ item.type }Generate` ](item);
                }
            },
            kstGenerate(option) {
                let js                 = `${ option.domain }bs/ks.j?cI=${ option.id }&fI=${ option.fi }&ism=1`;
                CONFIG.TYPE_OPTION.url = kstTypeUrl(option);

                loadJS(js);
            },
            swtGenerate(option) {
                loadJS(option.js);
            },
            yiliaoGenerate(option) {
                loadJS('http://scripts.easyliao.com/js/easyliao.js');
                let js = `http://scripts.easyliao.com/sdk/web/${ option.companyId }/${ option.modelId }.js`
                console.log('bus init-easy-live');
                this.$bus.$on('init-easy-live', (call) => {
                    console.log('emit init-easy-live');
                    this.initEasyLive(call)
                });
                loadJS(js);
            },
            initEasyLive(call) {
                if (!window.webcall) {
                    setTimeout(() => {
                        this.initEasyLive();
                    }, 2000);
                    return;
                }

                if (this.webChatInit) {
                    return false;
                }

                this.webChatInit = true;

                webcall.init({
                    onChating      : (nickName) => {
                        if (call) call();
                        console.log("与客服[" + nickName + "]的对话创建成功");
                    },
                    onOffline      : () => {
                        alert("创建对话失败， 当前客服不在线");
                        console.log("创建对话失败， 当前客服不在线");
                    },
                    /**
                     *    source 0 访客发送的消息  1客服发送的消息
                     */
                    onTextMessage  : (source, nickName, message, isRichText) => {
                        if (source == "0") {
                            console.log("您：" + message);
                        } else if (source == "1") {
                            console.log(nickName + "：" + message);
                        }

                        if (message.length !== 0 && !/####/.test(message)) {
                            var data = {
                                value: message,
                                type : source == 0 ? 'right' : 'left',
                            };
                            this.filterMessage({
                                message: data
                            });
                        }
                    },
                    onSystemMessage: function (message) {
                        console.log("系统消息：" + message);
                    },
                    onChatClosed   : function () {
                        console.log("对话已经结束");
                    }
                });
                var params = webcall.getChatParams();
                params.ref = getPageRefer();
                webcall.chat(null, params);
            },
        },
        computed  : {
            ...mapGetters({
                showFooter: 'Controller/showFooter',
            }),
            styleList() {
                return {
                    maxWidth: this.maxWidth + 'px',
                }
            }
        },
    }
</script>
